<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        @import url(http://fonts.useso.com/css?family=Sigmar+One);
        @import url(http://fonts.useso.com/css?family=Coda:800);
        body {
            background-color: black;
            color: white;
        }
        .jumbotron {
            color: black;
            padding: 0.5em 0;
        }
        svg {
            display: inline-block;
        }
        svg.h1 {
            height: calc(72px*.95);
        }
        .coda {
            font-family: Coda, sans-serif;
        }
        .h1 text {
            font-size: 72px;
            font-family: "Sigmar one", sans-serif;
        }
        svg.h2 {
            height: calc(46px * 1.4);
        }
        .h2 {
            font-size: 46px;
            font-family: "Sigmar one", sans-serif;
        }
        svg.h3 {
            height: 40px;
        }
        .h3 {
            font-size: 28px;
            font-family: "Sigmar one", sans-serif;
            stroke-width: 1px;
        }
        svg.pattern {
            fill: url(#Pattern);
        }
        svg.circle {
            fill: url(#circle);
        }
        svg.yellow {
            stroke: yellow;
        }
        svg.blue {
            stroke: skyblue;
        }
    </style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="Example">
    <div class="jumbotron">
        <div class="container">
            <h2>Fancy text using SVG</h2>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <svg width="100%" height="84" xmlns="http://www.w3.org/2000/svg" version="1.1" class="h1">
                    <text x="0" y="58" font-family="Sigmar one" font-size="72" fill="url(#Pattern)" stroke="white">
                        I love SVG!
                    </text>
                </svg>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod neque eaque fuga culpa doloribus adipisci vel explicabo! Nihil ipsa commodi quae voluptates laudantium fugit nam. Itaque veniam iure aliquid harum!</p>
            </div>
            <div class="col-md-6">
                <svg width="100%" height="84" xmlns="http://www.w3.org/2000/svg" version="1.1" class="h2 pattern">
                    <text x="0" y="58" stroke="white">
                        This is a pseudo H2
                    </text>
                </svg>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod neque eaque fuga culpa doloribus adipisci vel explicabo! Nihil ipsa commodi quae voluptates laudantium fugit nam. Itaque veniam iure aliquid harum!</p>
            </div>
            <div class="col-md-12">
                <svg width="100%" height="84" xmlns="http://www.w3.org/2000/svg" version="1.1" class="h3 circle blue coda">
                    <text x="0" y="30">
                        The two patterns www.girllee.com.
                    </text>
                </svg>
            </div>
        </div>
    </div>
</div>


<svg width="800" height="84" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <pattern id="Pattern" x="0" y="0" width=".25" height="1.25" patternTransform="rotate(15)">
            <rect x="0" y="0" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="10" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="20" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="30" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="40" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="50" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="60" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="70" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="80" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="90" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="100" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="110" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="120" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="130" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="140" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="150" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="160" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="170" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="180" width="1150" height="5" fill="skyblue" />
            <rect x="0" y="190" width="1150" height="5" fill="skyblue" />
        </pattern>

        <pattern id="circle" x="0" y="0" width="13" height="13" patternUnits="userSpaceOnUse">
            <circle cx="8" cy="8" r="2" fill="orange" />
            <circle cx="12" cy="12" r="3" fill="yellow" />
            <circle cx="8" cy="2" r="3" fill="orange" />
            <circle cx="2" cy="10" r="3" fill="red" />
            <circle cx="12" cy="10" r="3" fill="blue" />
            <circle cx="6" cy="4" r="3" fill="blue" />
        </pattern>


    </defs>
</svg>
</body>
</html>